<template>
    <div class="container">
        <div class="photo">
            <div class="left">
                <div class="select">
                    <span v-for="(i, index) in info.img" :key="index" :class="{ active: showImgUrl == index }"
                        @click="changeIndex(index)">
                        <img :src="i" alt="">
                    </span>
                </div>
                <div class="show">
                    <img v-for="(i, index) in info.img" :key="index" :src="i" alt=""
                        :class="{ active: showImgUrl == index }">
                </div>
            </div>
            <div class="right">
                <div class="title">{{ info.yyj_jing_qu }}</div>
                <div class="score">评分：<span>{{ info.yyj_ping_fen }} <i>/ 5分</i></span></div>
                <div class="clock">
                    <SvgIcon name="clock" width="15" height="15" /> <span>2025年必打卡景点</span>
                </div>
                <div class="site">地址：<span>{{ info.yyj_di_zhi }}</span></div>
                <div class="open">开放时间：<span>{{ info.yyj_kai_fang_shi_jian }}</span></div>
                <div class="heat">
                    <SvgIcon name="hate" width="20" height="20" />{{ info.yyj_re_du }}
                </div>
            </div>
        </div>
        <div class="content">
            <div class="introduce">
                <div class="title"><span></span> 介绍</div>
                <span>{{ info.jieshao }}</span>
                <div class="title"><span></span> 开放时间</div>
                <span>{{ info.yyj_kai_fang_shi_jian }}</span>

                <div class="map">
                    <div class="title">
                        <SvgIcon name="map" width="35" height="35" /> <i>地图</i>
                    </div>
                    注：地图位置标注仅供参考，具体情况以实际道路标实信息为准。
                    <div class="site">
                        <!-- 地图组件 -->
                        <MapSite :site="info.site" />
                    </div>
                </div>
            </div>
            <div class="nearby">
                <div class="deliciousfood">
                    <div class="title">附近景点</div>
                    <div class="scenic">
                        <div class="item" v-for="i in deliciousfoodInfo" :key="i.ID" @click="goDetails(i.ID)">
                            <div class="left">
                                <img :src="i.img[1]" alt="">
                            </div>
                            <div class="right">
                                <div class="name">{{ i.yyj_jing_qu }}</div>
                                <div class="score">{{ i.yyj_ping_fen }} <span>/ 5分</span> </div>
                                <div class="site">地址：{{ i.yyj_di_zhi }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="deliciousfood">
                    <div class="title">附近美食</div>
                    <div class="scenic">
                        <div class="item" v-for="i in foodInfo" :key="i.bian_hao" @click="goFoodDetails(i.bian_hao)">
                            <div class="left">
                                <img :src="i.tu_pian[1]" alt="">
                            </div>
                            <div class="right">
                                <div class="name">{{ i.ming_cheng }}</div>
                                <div class="score">{{ i.ping_fen }} <span>/ 5分</span> </div>
                                <div class="site">地址：{{ i.xing_xi.di_zhi }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { useScenicStore } from '@/stores/modules/scenic';
const scenicStore = useScenicStore()

import { useFoodsStore } from '@/stores/modules/foods';
const foodsStore = useFoodsStore()

import { useRoute, useRouter } from 'vue-router';
let $route = useRoute()
let $router = useRouter()



const goFoodDetails = (id: string) => {
    $router.push({ name: 'FoodDetails', params: { id } })
}

// 切换要展示的数据
const goDetails = (id: any) => {
    getRecommendInfo(id)
}

// 引入地图组件
import MapSite from './map/index.vue'

let deliciousfoodInfo = ref<any>([])

const setdeliciousfoodInfo = (data: any) => {
    let index = Math.floor(Math.random() * 10 + 5) + 20
    deliciousfoodInfo.value = data.slice(index, index + 3)
}

let info = ref<any>([])
const getRecommendInfo = async (id: any) => {
    let data = (await scenicStore.getRecommend()).data
    info.value = data.filter((i: any) => i.ID == id)[0]
    setdeliciousfoodInfo(data)
    changeIndex(0)
}

let foodInfo = ref<any>([])

const setFoodInfo = (data: any) => {
    let index = Math.floor(Math.random() * 10 + 1) + 20
    foodInfo.value = data.slice(index, index + 3)
}

const getFoodsInfo = async () => {
    let data = (await foodsStore.getFoods()).data
    setFoodInfo(data)
}

let showImgUrl = ref<any>(0)
const changeIndex = (index: any) => {
    showImgUrl.value = index
}


onMounted(() => {
    getRecommendInfo($route.params.id)
    getFoodsInfo()

})
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    min-width: 1000px;
    background-color: #f6f6f6;
    height: 1500px;

    .photo {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 15px 0;

        .left {
            width: 60%;
            height: 100%;
            display: flex;
            justify-content: space-between;

            .select {
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                span {
                    display: block;
                    width: 100%;
                    height: 24%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .active {
                    border: 2px solid #2681ff;
                }
            }

            .show {
                width: 79%;
                height: 100%;
                position: relative;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    transition: all .3s;
                }

                .active {
                    opacity: 1;
                }
            }
        }

        .right {
            width: 39%;
            height: 100%;
            position: relative;

            .title {
                font-weight: 450;
                font-size: 25px;
            }

            .score {
                font-weight: 450;
                font-size: 16px;
                margin: 10px 0;

                span {
                    font-size: 18px;
                    font-weight: 450;
                    color: #2681ff;

                    i {
                        font-size: 14px;
                        color: gray;
                    }
                }
            }

            .clock {
                display: flex;
                align-items: center;
                background-color: #ffeedf;
                width: 160px;
                padding: 5px;
                border-radius: 10%;
                justify-content: center;
                margin: 10px 0;

                span {
                    display: block;
                    margin-left: 3px;
                    font-size: 12px;
                    color: #673114;
                }
            }

            .site,
            .open {
                font-weight: 450;
                font-size: 16px;

                span {
                    font-weight: 300;
                }
            }

            .heat {
                position: absolute;
                top: 0;
                right: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80px;
                height: 30px;
                background-color: #fdf1f2;
                color: #ff525a;
                border-radius: 20%;
            }
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        margin-top: 20px;

        .introduce {
            background-color: #fff;
            width: 70%;

            .title {
                font-weight: 600;
                font-size: 25px;
                margin-bottom: 10px;
                display: flex;

                span {
                    display: block;
                    width: 3px;
                    height: 35px;
                    background-color: #0086f6;
                    margin-right: 10px;
                }
            }

            span {
                display: block;
                margin-bottom: 20px;
                font-size: 16px;
            }

            .map {

                .title {
                    color: #0086f6;

                    i {
                        margin-left: 10px;
                    }
                }

                .site {
                    width: 100%;
                    height: 500px;
                }
            }
        }

        .nearby {
            width: 28%;

            .deliciousfood {
                background-color: #fff;
                margin-bottom: 30px;

                .title {
                    font-weight: 500;
                    font-size: 18px;
                    padding: 10px;
                }

                .scenic {
                    width: 100%;

                    .item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        padding: 10px;
                        height: 100px;


                        .left {
                            width: 34%;
                            height: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .right {
                            width: 64%;
                            padding: 5px 0;
                            font-weight: 300;

                            .name {
                                font-size: 16px;
                                overflow: hidden;
                                text-wrap: nowrap;
                                text-overflow: ellipsis;
                            }

                            .score {
                                font-size: 14px;
                                margin: 8px 0;
                                overflow: hidden;
                                text-wrap: nowrap;
                                text-overflow: ellipsis;

                                span {
                                    color: red;
                                    font-size: 16px;
                                }
                            }

                            .site {
                                font-size: 14px;
                                overflow: hidden;
                                text-wrap: nowrap;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>